<template>
  <el-dialog title="流程列表" top="1vh" :visible.sync="flowBox" width="1200px" append-to-body='true'>
    <avue-crud id="crud" v-model="form" :option="option" :data="data" ref="crud" :table-loading="loading" :permission="permissionList" @refresh-change="refreshChange" @row-click="onLoadChild"></avue-crud>
    <el-card shadow="hover" style="margin-bottom: 10px;">
      <div slot="header">
        <span>流程图</span>
      </div>
      <div style="display: flex; justify-content: center; width: 100%; padding: 10px 0">
        <img :src="flowUrl" width="86%" />
      </div>
    </el-card>
    <el-card shadow="hover" style="margin-bottom: 10px;">
      <div slot="header">
        <span>审批岗位/人员</span>
      </div>
      <div style="padding: 14px; font-size: 14px; line-height: 26px;">
        <div v-for="(name, i) in approveUserInfo" :key="i">
          <div>{{name}}</div>
        </div>
      </div>
    </el-card>
    <div v-if="data.length>0">
      <el-form ref="form" :model="form" label-width="80px">
        <el-card shadow="hover">
          <div slot="header">
            <span>流程信息</span>
          </div>
          <div style="height: 400px;overflow: auto;">
            <el-row type="flex" class="row-bg">
              <el-timeline>
                <el-timeline-item :key="flow.id" :timestamp="flow.createTime" v-for="flow in flowList" placement="top">
                  <el-card shadow="hover">
                    <p>{{flow.assigneeName}} 在 [{{flow.createTime}}] 开始处理 [{{flow.historyActivityName}}] 环节</p>
                    <p v-if="flow.historyActivityDurationTime!==''">任务历时 [{{flow.historyActivityDurationTime}}]</p>
                    <p v-if="flow.comment!==''">批复意见: [{{flow.comment}}]</p>
                    <p v-if="flow.endTime!==''">结束时间: [{{flow.endTime}}]</p>
                  </el-card>
                </el-timeline-item>
              </el-timeline>
            </el-row>
          </div>

        </el-card>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="flowBox = false">关 闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getInstanceList } from "@/api/work/work";
import { historyFlowList, getApprovePerson } from "@/api/work/process"
import {
  getPostIdTrees,
  getUserList,
} from "@/api/flow/configuration.js"
export default {
  name: "flowList",
  props: ['position'],
  data() {
    return {
      flowBox: false,
      loading: false,
      flowList: [],
      processInstanceId: "",
      form: {
        flow: {
          assigneeName: "",
        },
        startTime: "",
        endTime: "",
        reason: "",
      },
      data: [],
      option: {
        tip: false,
        border: true,
        addBtn: false,
        editBtn: false,
        delBtn: false,
        index: true,
        indexLabel: "序号",
        menu: false,
        searchLabelWidth: 100,
        height: 150,
        viewBtn: false,
        highlightCurrentRow: true,
        column: [
          {
            label: "流程标题",
            prop: "flowTitle",
          },
        //   {
        //     label: "流程进度",
        //     prop: "status"
        //   },
          {
            label: "申请时间",
            prop: "createTime",
          },
        ],
      },
      postIdTrees: [],
      userList: [],
      approveUserInfo: [],
    };
  },

  mounted() {
    // 岗位
    getPostIdTrees().then((res) => {
      this.postIdTrees = res.data.data;
    });
    // 人员
    getUserList().then((res) => {
      this.userList = res.data.data;
    });
  },

  methods: {
    open(row) {
      this.flowBox = true;
      this.onLoad(row.id);
      console.log(row)
      let params = {
        menuName: this.$route.name
      }
      if (this.position=='carryOut') {
        params.businessName = row.fileId
      }
      if (this.position == 'projectChange') {
        params.businessName = row.changeContent
      }
      getApprovePerson(params).then(res => {
        let data = res.data.data
        this.approveUserInfo = []
        for (let i = 1; i< 11; i++) {
          console.log(data['type'+i])
          console.log(data['parameter'+i])
          if (data['type'+i]) {
            if (data['type'+i] == 1) {
              this.approveUserInfo.push(window.$findObjFromTree('id', data['parameter'+i], this.postIdTrees).title)
            }
            if (data['type'+i]==2) {
              this.approveUserInfo.push(this.userList.find(item => item.id == data['parameter'+i]).name)
            }
            if (data['type'+i]==3) {
              this.approveUserInfo.push('部门领导')
            }
            if (data['type'+i]==4) {
              this.approveUserInfo.push('项目经理')
            }
          }
        }
      })
    },
    onLoad(rowId) {
      this.loading = true;
      getInstanceList(rowId).then((res) => {
        this.data = res.data.data;
        this.loading = false;
        if (this.data.length > 0) {
          this.$nextTick(() => {
            this.$refs.crud.setCurrentRow(this.data[0]); //默认选中第一条项目
            this.onLoadChild({processInstanceId:this.data[0].processInstanceId});
            var timestamp = new Date().getTime();
            this.flowUrl = `/api/blade-flow/process/diagram-view?processInstanceId=${this.data[0].processInstanceId}&time=${timestamp}`;
          });
        }else{
            this.flowList=[];
        }
      });
      //   getList().then((res) => {
      //     const data = res.data.data;
      //     this.loading = false;
      //   }).catch(() => {
      //     this.loading = false;
      //   });
    },
    onLoadChild(row) {
      var timestamp = new Date().getTime();
      this.flowUrl = `/api/blade-flow/process/diagram-view?processInstanceId=${row.processInstanceId}&time=${timestamp}`;
      historyFlowList(row.processInstanceId).then((res) => {
        const data = res.data;
        if (data.success) {
          this.flowList = data.data;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
</style>